<template>
	<div>
		<el-dialog title="图片库" :visible.sync="imgVisible" width="40%" :modal-append-to-body="false" append-to-body>
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="全部" name="first"></el-tab-pane>
				<el-tab-pane v-for="(item,index) in imageTypeAll" :key="index" :label="item.typeName"
					:name="item.id+''"></el-tab-pane>
			</el-tabs>
			<div class="margin-top20 row-me flex-wrap">
				<div v-for="item in imageAll" :key="item.id" class="posRelative">
					<i class="el-icon-success" style="color: #409EFF;position: absolute;top: -3px;right: 7px;z-index: 99;"
						v-if="item.isShow"></i>
					<el-image :src="item.url" fit="scale-down" class="width100 height100 margin-right10"
						@click="handleSelectImage(item)"></el-image>
				</div>
			</div>
			<div class="margin-top10">
				<el-pagination background layout="->,total,sizes, prev, pager, next" :current-page="query.pageNumber"
					:page-sizes="[10, 20, 30, 40]" @size-change="handleSizeChange" :page-size="query.pageSize" :total="pageTotal"
					@current-change="handlePageChange"></el-pagination>
			</div>
			<span slot="footer" class="row-me">
				<el-button type="text" @click="visible=true">上传图片</el-button>
				<el-button type="text" style="color: red;" @click="clickDelImg">删除图片</el-button>
				<div class="flex1"></div>
				<el-button @click="imgVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleSave">确 定</el-button>
			</span>
		</el-dialog>

		<el-dialog append-to-body title="上传" :visible.sync="visible" width="40%">
			<el-form :model="form" label-width="80px">
				<el-form-item label="分类">
					<el-select placeholder="请选择上传的分类" v-model="form.imgId">
						<el-option v-for="(item,index) in imageTypeAll" :key="index" :label="item.typeName"
							:value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="上传图片">
					<uploadLocal :value="fileList" @input="getImgData"></uploadLocal>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="visible = false">取 消</el-button>
				<el-button type="primary" @click="handleImgSave">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import uploadLocal from "@/components/Upload/multiUploadLocal"
	export default {
		components: {
			uploadLocal
		},
		data() {
			return {
				imgVisible: false,
				tabIndex: 0,
				query: {
					pageNumber: 1,
					pageSize: 30
				},
				pageTotal: 0,
				imageAll: [],
				url: '',
				visible: false,
				form: {},
				imageTypeAll: [],
				fileList: [],
				activeName: 'first',
				multipleArr: [],
				isMultiple: false,
				imgInfo: {}
			}
		},
		methods: {
			async clickDelImg() {
				if (this.$.isEmpty(this.imgInfo.id)) {
					this.$message.warning('请选择图片!')
					return
				}
				const res = await this.$post('/admin/image/imageDelete', [this.imgInfo.id])
				if (res.code == 1000) {
					this.$message.success('删除成功')
					this.getData()
					this.imgInfo = {}
				}
			},
			handleClick(tab) {
				this.query.pageNumber = 1
				this.tabIndex = this.activeName
				this.getData()
			},
			//上传
			async handleImgSave() {
				if (this.$.isEmpty(this.form.imgId)) {
					this.$message.warning('请选择分类!')
					return
				}
				if (this.form.files.length == 0) {
					this.$message.warning('请选择图片!')
					return
				}
				let arr = []
				for (let item of this.form.files) {
					arr.push({
						imgId: this.form.imgId,
						url: item
					})
				}
				const res = await this.$post('/admin/image/imageSaveAll', arr)
				if (res.code == 1000) {
					this.$message.success('批量上传成功')
					this.getData()
					this.visible = false
					this.form = {}
					this.fileList = []
				}
			},
			getImgData(data) {
				this.form.files = data
			},
			//获取图库分类
			async getImageTypeAll() {
				const res = await this.$postForm('/admin/image/imageTypeList')
				if (res.code == 1000) {
					this.imageTypeAll = res.data.list
				}
			},
			show(type = 0) {
				this.isMultiple = type
				this.imgVisible = true
				this.multipleArr = []
				this.getData()
				this.getImageTypeAll()
			},
			handleSave() {
				this.imgVisible = false
				if (this.isMultiple) {
					this.$emit('handleImgOk', this.multipleArr)
				} else {
					this.$emit('handleImgOk', this.url)
				}
			},
			async getData() {
				this.query.imgId = this.activeName == 'first' ? '' : Number(this.tabIndex)
				const res = await this.$postForm('/admin/image/imageAll', this.query)
				if (res.code == 1000) {
					this.imageAll = res.data.list
					this.pageTotal = res.data.totalRow
				}
			},
			clickTab(index) {
				this.tabIndex = index
				this.getData()
			},
			handleSelectImage(item) {
				if (this.isMultiple) {
					this.$set(item, 'isShow', true)
					this.multipleArr.push(item.url)
				} else {
					for (let val of this.imageAll) {
						this.$set(val, 'isShow', false)
					}
					this.$set(item, 'isShow', true)
					this.imgInfo = item
					this.url = item.url
				}
			},
			handlePageChange(val) {
				this.query.pageNumber = val
				this.getData();
			},
			handleSizeChange(val) {
				this.query.pageSize = val
				this.getData();
			},
		}
	}
</script>

<style>
</style>